<template>
  <div class="discovery-container">
    <!-- 轮播图 -->
    <el-carousel class=""
                 :interval="4000"
                 type="card">
      <!-- 循环获取到的接口数据 -->
      <el-carousel-item v-for="(item,i) in banner"
                        :key="i">
        <img :src="item.imageUrl"
             alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单 -->
    <div class="recommend">
      <h3 class="title">
        推荐歌单
      </h3>
      <div class="items">
        <div class="item"
             v-for="(item,i) in list"
             :key="i"
             @click="toItems(item.id)">
          <div class="img-wrap">
            <div class="desc-wrap">
              <span class="desc">{{item.copywriter}}</span>
            </div>
            <img :src="item.picUrl"
                 alt="" />
            <span class="iconfont icon-play el-icon-headset"></span>
          </div>
          <p class="name">{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="news">
      <h3 class="title">
        最新音乐
      </h3>
      <div class="items">
        <div class="item"
             v-for="(item,i) in newList"
             :key="i">
          <div class="img-wrap">
            <img :src="item.picUrl"
                 alt="" />
            <span @click="playMusic(item.id)"
                  class="iconfont icon-play el-icon-headset"></span>
          </div>
          <div class="song-wrap">
            <!-- 歌名 -->
            <div class="song-name">{{item.name}}</div>
            <!-- 歌手名 -->
            <div class="singer">{{item.song.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="mvs">
      <h3 class="title">推荐MV</h3>
      <div class="items">
        <div class="item"
             v-for="(item,i) in MVList"
             :key="i"
             @click="toMV(item.id)">
          <div class="img-wrap">
            <img :src="item.picUrl"
                 alt="" />
            <span class="iconfont icon-play el-icon-video-camera"></span>
            <div class="num-wrap">
              <div class="iconfont icon-play"></div>
              <div class="num">{{item.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <!-- Mv名 -->
            <div class="name">{{item.copywriter}}</div>
            <!-- 歌手名 -->
            <div class="singer">{{item.artistName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'
export default {
  name: 'discovery',
  data () {
    return {
      //  轮播图
      banner: [],
      list: [],
      newList: [],
      MVList: []
    }
  },
  created () {
    // 轮播图接口
    axios({
      url: 'https://autumnfish.cn/banner',
      method: 'get'
    }).then(res => {
      // console.log(res);
      this.banner = res.data.banners
    })

    // 推荐歌单
    axios({
      url: 'https://autumnfish.cn/personalized',
      methods: 'get',
      // 传递参数
      params: {
        // 获取的数据量
        limit: 10
      }
    }).then(res => {
      // console.log(res);
      this.list = res.data.result
    })

    // 最新音乐
    axios({
      url: 'https://autumnfish.cn/personalized/newsong',
      methods: 'get'
    }).then(res => {
      // console.log(res);
      this.newList = res.data.result
    })

    // 最新MV
    axios({
      url: 'https://autumnfish.cn/personalized/mv',
      methods: 'get'
    }).then(res => {
      console.log(res);
      this.MVList = res.data.result
    })
  },
  methods: {
    // 点击跳转到MV
    toMV (id) {
      this.$router.push(`/mv?q=${id}`)
    },

    // 点击跳转到歌单
    toItems (id) {
      this.$router.push(`/playlist?q=${id}`)
    },

    // 点击播放音乐
    playMusic (id) {
      axios({
        url: 'https://autumnfish.cn/song/url',
        methods: 'get',
        params: { id }
      }).then(res => {
        // console.log(res)
        let url = res.data.data[0].url
        // console.log(this.$parent.musicUrl);
        // 设置给父组件的播放地址
        this.$parent.musicUrl = url
      })
    }
  }
};
</script>

<style >
</style>
